import React from 'react';
import { findDOMNode } from 'react-dom';
import View from 'lib/View.jsx'
import RootScope from './RootScope.es6'
import Layout from '../common/layout.jsx'
import Card from 'lib/components/card.jsx'
import ChartWidget from 'lib/components/ChartWidget.jsx'
import addWidgetMixin from '../common/NewDashboardWidget.jsx'
import CrashNameGrid from './CrashNameGrid.jsx'
import dispatcher from 'lib/dispatcher'
import tips from '../common/indicator-tips.jsx'
import DropdownList from '../common/DropdownList.jsx';

import Resizable from 'lib/components/Resizable.jsx';

import $ from 'jquery';
import _ from 'underscore';

export default class RootView extends View{
  toggleFilters(filterKey){
    dispatcher.dispatch({
      $type:'toggle_filters',
      key:filterKey
    })
  }
  toggleHiddenItemsHandler(e) {
    dispatcher.dispatch({
      $type: 'toggle_hidden_items',
      e: e
    })
  }
  resizeHiddenGrid(current) {
    let $node = $(findDOMNode(this.refs.grid)).find('tbody > tr:eq(0) > td');
    if ($node.length === 1) {
      return;
    }

    let widths = _.map($node, value => value.offsetWidth, this);
    dispatcher.dispatch({
      $type: 'resize_hidden_grid_columns_width',
      widths
    });
  }

  hiddenGridContentRender(column,isHeader,callback) {
    let width = 'auto';
    if (column.width && _.isNumber(column.width)) {
      width = (column.width - 17) + 'px';
    }

    return (<div style={{width}}>{callback()}</div>);
  }

  onChangeCrashType(type) {
    dispatcher.dispatch({
      $type: 'change_crash_type',
      crashType: type
    });
  }

  render(){
    let crashList = [
      {
        label: '崩溃次数',
        value: 'crash_count'
      }, {
        label: '崩溃率',
        value: 'crash_rate'
      }
    ];
    if (!BlueWare.crashRateSupported && BlueWare.isIOS) {
      crashList = _.filter(crashList, p => p.value !== 'crash_rate');
    }

    return (
      <div>
        <div className="pure-g">
          <div className="pure-u-1 pure-u-lg-1-2">
            <div className="box">
              <Card title={
                  <span>
                    <DropdownList list={crashList} current={ this.state.crashType } style={{
                      width: 120,
                      display: 'inline-block'
                    }} onChanging={ this.onChangeCrashType.bind(this) } />
                    <i className="iconfont" key={ this.state.crashType.value } data-tip={ tips[`crashlog_${this.state.crashType.value}`] }>&#xe663;</i>
                  </span>
                } extra={
                  [<span key="crashlog" style={{lineHeight: '30px'}}>未解决的崩溃数：{this.state.totalNum}</span>,addWidgetMixin(this.scope.chart0Api, this.state.crashType.label)]
                }>
                <ChartWidget store={this.state.chart0} />
              </Card>
            </div>
          </div>
          <div className="pure-u-1 pure-u-lg-1-2">
            <div className="box">
              <Card title={
                  <span>
                    崩溃次数按版本
                    <i className="iconfont" data-tip={tips.crashlog_crash_count_by_version}>&#xe663;</i>
                  </span>
                } extra={
                  addWidgetMixin(this.scope.chart1Api,'崩溃次数按版本')
                }>
                <ChartWidget store={this.state.chart1} />
              </Card>
            </div>
          </div>
        </div>
        <div className="pure-g">
          <div className="pure-u-1">
            <div className="box">
              <Card title={
                  <span>
                    崩溃类型列表
                    <i className="iconfont" data-tip={tips.crashlog_crashlist}>&#xe663;</i>
                  </span>
                } extra={
                  [
                    <div className="crash-level-icons" key="crash-level-icons">
                      崩溃等级：低
                        <div className="level-icons">
                          <i className="crash-icon level-1"></i>
                          <i className="crash-icon level-2"></i>
                          <i className="crash-icon level-3"></i>
                          <i className="crash-icon level-4"></i>
                          <i className="crash-icon level-5"></i>
                        </div>
                      高
                    </div>,
                    <div className="float-left" style={{lineHeight: '30px'}} key="crash-log-tool">
                      <input type="checkbox" onChange={this.toggleFilters.bind(this,'fixed')}/>
                        未解决
                      &nbsp;&nbsp;&nbsp;
                      <input type="checkbox" onChange={this.toggleFilters.bind(this,'follow')}/>
                        高优先级
                    </div>
                  ]
                }>
                <Resizable onResize={this.resizeHiddenGrid.bind(this)}>
                  <CrashNameGrid ref="grid" store={this.state.grid} />
                </Resizable>
                <div style={{textAlign: 'right', padding: '23px 0 10px 0'}}>
                  <a onClick={ this.toggleHiddenItemsHandler.bind(this) } className="btn-blue">显示隐藏的崩溃</a>
                </div>
                <div style={{ 'display': (this.state.displayHiddenItems ? 'block' : 'none') }}>
                  <CrashNameGrid
                    key={this.state.hiddenGridKey}
                    cols={this.state.hiddenGridColumns}
                    store={ this.state.hiddenGrid }
                    contentRender={this.hiddenGridContentRender}/>
                </div>
              </Card>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
RootView.defaultProps = {
  Scope:RootScope
}
